<template>
  <div>

    <sticky :class-name="'sub-navbar'" :z-index="10">

      <el-dropdown
        split-button trigger="click" type="primary">
        <!--        <el-button-->
        <!--          style="margin-left: 10px;" type="primary">-->
        <!--          新增半成品-->
        <!--        </el-button>-->
        配置方式
        <el-dropdown-menu slot="dropdown" class="azure-dropdown">
          <el-dropdown-item>
            <el-switch
              v-model="isNewConfigMode"
              active-text="new transfer Mode 穿梭框"
              inactive-text="drawer Mode 抽屉待完善"/>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>


      <el-button type="info" @click="$router.back()">
        返回全部产品列表
      </el-button>
    </sticky>

    <el-card>
      <el-alert
        :closable="false"
        :title="`${linkFrom}基本信息修改`"
        effect="dark"
        show-icon
        style="margin-bottom: 15px;"
        type="success"
      />
      <!--  产品基本信息,内部包含了修改,因为修改的逻辑是通用的,实在是不同的在外面传给内部组件  -->
      <ProductBaseInfoForm
        :isUpdate="true"
        :modifyData.sync="modifyData"/>
    </el-card>

    <!--      // linkFrom linkTo-->

    <!--  产品列表,已有的,不需要分页 -->
    <!--  产品配置  -->
    <el-card
      v-if="!isNewConfigMode"
      style="margin-top: 15px;">
      <ProductRelateConfig
        :modifyData="modifyData"
        :tableData="hasRelateList"
        @tableDataUpdate="tableDataUpdate"/>
    </el-card>

    <ProductRelateConfigTransfer
      v-else
      :hasRelateList.sync="hasRelateList"
      :modifyData="modifyData"
      @refreshData="handleRefreshData"
      @tableDataUpdate="tableDataUpdate"/>

    <!--    transfer mode    -->
  </div>
</template>

<script>

//  产品列表
import {ModifyProductComponent, PageQueryProduct, QueryProductComponent} from '@/api/productInformation'
import AzureDynamicTable from '@/components/ATheFridayClub/mDynamicTable/AzureDynamicTable'
import {ERR_OK} from '@/utils/commons'
import layoutMixin from '@/mixins/layoutMixin'
import Sticky from '@/components/Sticky/index'
import AButton from '@/components/ATheFridayClub/AButton'
import {productBaseCols} from '@/views/baseproduct/mixins/productUtil'
import ShowAllProductList from '@/views/baseproduct/components/product/ShowAllProductListDrawer'
import ProductBaseInfoForm from '@/views/baseproduct/components/product/ProductBaseInfoForm'

import productMixin from '@/views/baseproduct/components/product/productMixin'
import ProductRelateConfig from '@/views/baseproduct/components/product/ProductRelateConfig'
import ProductRelateConfigTransfer from '@/views/baseproduct/components/product/ProductRelateConfigTransfer'
import {dataStatusTypesEnum} from '@/enums/common'

const columnDesObjs = Array.of(
  ...productBaseCols,

  {key: 'operator', label: '操作', width: '180'}
)

export default {
  name: 'editProductInfo',
  components: {
    ProductRelateConfigTransfer,
    ProductRelateConfig,
    ProductBaseInfoForm, ShowAllProductList,
    AButton, AzureDynamicTable, Sticky
  },
  mixins: [layoutMixin, productMixin],
  data() {
    return {
      isNewConfigMode: true,

      modifyData: {}, //  编辑的或新增的数据
      hasRelateList: Array.of()  //  产品目前的组件,已经包含的关联关系列表

      //  产品已有的列表
      // searchFormData: {
      //   // productType: null,  //  el-select 匹配不到会显示一个奇怪的值,必须为null
      //   page: 1,
      //   limit: 10
      // },
      // total: 0,

    }
  },
  computed: {
    // isNewData() {
    //   const { ProductId, Code: code } = this.$route.query
    //   return ProductId && code
    // }

    //  ProductType
    proxyProductType() {
      const {modifyData: {ProductType}} = this
      return ProductType
    }
  },

  async created() {
    // const loading = this.$loading({
    //   lock: true,
    //   text: '正在加载🤣🎶😜✔🐱‍🏍✨👍👌👌🎁🎉🎉🎉👏🤔',
    //   spinner: 'el-icon-loading',
    //   background: 'rgba(0, 0, 0, 0.7)'
    // })
    await this.getBaseData()  //  获取产品id查询基础信息
    await this.getRelateData()  //  获取关联关系
    //  修改 route :: title
    // loading.close()

  },
  methods: {
    tableDataUpdate(newTableData) {
      this.hasRelateList = newTableData
    },

    //  删除关系
    handleDeleteProduct() {
      //  直接本地删除table中的,之后调用 submitModify
    },

    //  删除,新增 调用  { status } = {}
    submitModify() {
      try {
        const {hasRelateList} = this
        const {Code} = ModifyProductComponent(hasRelateList)
        if (Code === ERR_OK) {
          this.$message.success('保存{产品}{xx}关系成功')
        }
      } catch (e) {
        console.log(e)
      }
    },

    handleRefreshData({deleteIds}) {
      this.getRelateData()
      // const deleteIndexList = deleteIds.reduce((acc, id) => {
      //   return [...acc, this.hasRelateList.findIndex(v => v.partId === id)]
      // }, [])
      //
      // deleteIndexList.forEach(id => this.hasRelateList.splice(id, 1))

    },

    //  查询当前产品关联的组件信息
    async getRelateData() {
      //  if 套系 >>> show 产品 list
      //  if 产品 >>> show 组件 list
      // const { ProductType } = this.modifyData
      try {
        const {ProductId, Code: code} = this.$route.query ?? {}
        const {Code, Result} = await QueryProductComponent({
          productId: ProductId, componentId: 0
        })
        if (Code === ERR_OK) {
          this.hasRelateList = Result.sort((a, b) => a.orderIndex - b.orderIndex).map(v => {
            const {ProductId, ...other} = v.part
            return ({...v, ...other, ProductId: v.productId})
          }).filter(v => v.status === dataStatusTypesEnum['正常'])


          //  不要分页,滚动形式..... el限制表格高度就行了
        }
      } catch (e) {
        console.log(e)
      }
    },

    async getBaseData({} = {}) {
      const {ProductId: productId, Code: code} = this.$route.query
      try {
        const {Code, Result} = await PageQueryProduct({code, productId})
        if (Code === ERR_OK) {
          const {CurrentPage, RecordCount, Rows} = Result;
          ({[0]: this.modifyData = {}} = Rows)
        } else {
          this.$message.warning('获取产品的详情信息失败')
        }
      } catch (e) {
        console.log(e)
      }
    },

    //  对于产品的新增和修改能否抽离出去,便于日后的维护.
    //  视图根据 type 来判断 add or update
    //  新增和修改产品信息
    // beforeAnimateClose() {
    //   //  modifyFormData :: reset
    //
    // },

    createProductSubmit() {
      //  validate modifyFormData

      //  call modifyInterface

      // if success close dialog
    },

    editProductSubmit() {
      //  validate modifyFormData

      //  call modifyInterface

      // if success close dialog

    }

  }
}
</script>

<style lang="scss" scoped>

</style>
